import React, { Component } from "react";
import PropTypes from "prop-types";
import item from "./index.module.css";

export default class Item extends Component {
  static propTypes = {
    id: PropTypes.string.isRequired,
    done: PropTypes.bool.isRequired,
    name: PropTypes.string.isRequired,
    handleCheck: PropTypes.func.isRequired,
    deleteTodo: PropTypes.func.isRequired,
  };

  state = { enter: false };
  // 鼠标移入移出
  handleMouse = (falg) => {
    return () => {
      this.setState({
        enter: falg,
      });
    };
  };
  // 修改某一项事件
  handleChange = (id) => {
    return (e) => {
      this.props.handleCheck(id, e.target.checked);
    };
  };
  // 删除某一项事件
  handleDelete = (id) => {
    return () => {
      if (window.confirm("是否删除")) this.props.deleteTodo(id);
    };
  };

  render() {
    let { enter } = this.state;
    let { id, done, name } = this.props;
    return (
      <div
        className={item.item}
        onMouseEnter={this.handleMouse(true)}
        onMouseLeave={this.handleMouse(false)}
      >
        <div>
          <label>
            <input
              type="checkbox"
              checked={done}
              onChange={this.handleChange(id)}
            />
            <span className={item.event}>{name}</span>
          </label>
        </div>
        <button
          style={{ display: enter ? "block" : "none" }}
          className={item.btn}
          onClick={this.handleDelete(id)}
        >
          删除
        </button>
      </div>
    );
  }
}
